<!--
 * @Author: yinche 2814620694@qq.com
 * @Date: 2023-06-08 11:15:25
 * @LastEditors: yinche 2814620694@qq.com
 * @LastEditTime: 2023-06-14 15:49:17
 * @FilePath: \qiemeng-app\src\views\Crayon.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEh1
-->
<template>
    <div>
        <div class="head">
            <div class="head">
                <van-button @click="$router.go(-1)" type="primary">退出</van-button>
                <h3>当前播放的是{{ name }}</h3>
            </div>
        </div>
        <video controls :src="data[index]"></video>
        <button @click="next">下一集</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let index = ref(0); //下标
const data = [
    //视频资源
    'http://yinche.work:7777/audio/lB/1.mp4',
    'http://yinche.work:7777/audio/lB/2.mp4',
    'http://yinche.work:7777/audio/lB/3.mp4',
    'http://yinche.work:7777/audio/lB/4.mp4',
    'http://yinche.work:7777/audio/lB/5.mp4',
    'http://yinche.work:7777/audio/lB/6.mp4',
    'http://yinche.work:7777/audio/lB/7.mp4',
    'http://yinche.work:7777/audio/lB/8.mp4',
    'http://yinche.work:7777/audio/lB/9.mp4',
];
const name = ref(''); //渲染名称
const next = () => {
    //下一集
    index.value += 1;
    if (index.value >= 9) {
        //大于9默认回0
        index.value = 0;
    }
    switch (index.value) {
        case 0:
            name.value = '《动感超人大战泳装魔王》';
            break;
        case 1:
            name.value = '《布里布里王国的宝藏 》';
            break;
        case 2:
            name.value = '《云黑斋的野心》';
            break;
        case 3:
            name.value = '《奇异乐园大冒险》';
            break;
        case 4:
            name.value = '《黑暗珠珠大追击》';
            break;
        case 5:
            name.value = '《电击！猪之蹄大作战》';
            break;
        case 6:
            name.value = '《爆发！温泉火热大决战》';
            break;
        case 7:
            name.value = '《森林大冒险》';
            break;
        case 8:
            name.value = '《大人帝国的反击》';
            break;
    }
};
</script>

<style scoped>
video {
    width: 100%;
    height: 400px;
}
</style>
